<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        /* 后代选择器 */
        .site-r a {
            color: red;
        }
        /*  后代选择器 */
        .nav a {
            color: orange;
        }
        /*子代选择器*/
        .nav> ul > li >a {
            color: green;
        }

        /* 交接 */
        .nav,.sitenav {
            font-size: 20px;
            /* font-family: ; */
            font-family:"Microsoft Yahei";
        }
    </style>
</head>
<body>
    <div class="nav">    <!-- 主导航栏 -->
        <ul>
          <li><a href="#">公司首页</a></li>
          <li><a href="#">公司简介</a></li>
          <li><a href="#">公司产品</a></li>
          <li>
               <a href="#">联系我们</a>
               <ul>
                          <li><a href="#">公司邮箱</a></li>
                          <li><a href="#">公司电话</a></li>
               </ul>
          </li>
        </ul>
      </div>
      <div class="sitenav">    <!-- 侧导航栏 -->
        <div class="site-l">左侧侧导航栏</div>
        <div class="site-r"><a href="#">登录</a></div>
      </div>
</body>
</html>